<template>
  <div class="page-task">
    <div class="right">
      <Form ref="searchForm" inline>
        <FormItem style="margin-bottom:0">
          <DatePicker v-model="search.realTime" type="datetimerange" :placeholder="$t('page.schedule.taskdetail.realTime')"></DatePicker>
        </FormItem>
        <FormItem style="margin-bottom:0">
          <Input v-model="search.schedule" clearable :placeholder="$t('page.schedule.name')" />
        </FormItem>
        <FormItem style="margin-bottom:0">
          <Input v-model="search.no" clearable :placeholder="$t('page.schedule.tasksearch.no')" />
        </FormItem>
        <FormItem style="margin-bottom:0">
          <Button type="primary" @click="onSearch(1)">{{$t('button.search')}}</Button>
        </FormItem>
      </Form>
    </div>
    <Divider />
    <TaskView :header="$t('page.schedule.tasktb.header')" :schedule="true" :loading="task.loading" :tasks="task.list" @onRefresh="onSearch(0)" />
    <div class="center mt-15">
      <Page :total="task.total" :current="task.page" :page-size="task.size" show-sizer @on-change="onSearch" @on-page-size-change="onSearch(1)" />
    </div>
  </div>
</template>
<script>
  import TaskView from './comp/taskview'
  export default {
    components: { TaskView },
    data() {
      return {
        task: {
          loading: true,
          page: 1,
          size: 10,
          total: 0,
          list: []
        },
        search: {
          realTime: '',
          schedule: '',
          no: '',
        }
      }
    },
    computed: {
      filters() {
        let that = this
        let filters = {}
        let filter
        for (let f in that.search) {
          filter = that.search[f]
          if (filter) {
            if (f === 'realTime') {
              if (filter[0] && filter[1]) {
                filters['startTime>='] = new Date(filter[0]).getTime()
                filters['startTime<='] = new Date(filter[1]).getTime()
              }
            } else {
              filters[f] = filter
            }
          }
        }
        return filters
      }
    },
    mounted() {
      this.loadTask(1)
    },
    methods: {
      onSearch(page) {
        this.task.page = page || 1
        this.loadTask()
      },
      loadTask() {
        this.task.loading = true
        this.$md.dispatch('schedule_task_list', {
          data: {
            page: this.task.page,
            limit: this.task.size,
            filters: this.filters
          }
        }).then(data => {
          if (data.retCode === 1) {
            let tasks = data.data || []
            let task
            for (let i in tasks) {
              task = tasks[i]
            }
            this.task.total = data.count
            this.task.list = tasks
          }
          this.task.loading = false
        })
      }
    }
  }
</script>
